<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
			body{
				background-color: #f5f5f5;
			}
			#app{
				background-color: #fff;
				width: 400px;
				/* border: 1px solid #999; */
				margin: 10px auto;
				padding: 20px;
				box-shadow: 0 0 10px 1px #999;
			}
			label{
				font-size: 20px;
			}
			input{
				height: 35px;
				margin: 10px;
				border: 2px solid #999;
				border-radius: 3px;
				padding: 0 10px;
				outline: none;
				font-size: 16px;
			}
			span{
				color: red;
				font-weight: 600;
			}
			p{
				font-size: 18px;
				line-height: 45px;
				color: #666;
			}
			i{
				color: blue;
			}
	</style>
	<body>
			<div id='app'>
				<h3 align='center'>黄金价格计算器</h3>
				<label>买入单价：</label>
				<input v-model.number="BidPrice" type="number"> 
				<span>元/克</span> <br>
				<label>卖出单价：</label>
				<input v-model.number="SellingPrice" type="number"> 
				<span>元/克</span> <br>
				<label>手续费率：</label>
				<input v-model.number="HandlingFeeRates"  type="number"> 
				<span>%</span> <br>
				<label>购买数量：</label>
				<input v-model.number="Count"  type="number"> 
				<span>克</span> <br>
				<hr>
				<p>
					成本价： <i> {{CostPrice}} </i> <br>
					卖出价：<i> {{SellPrice}} </i> <br>
					手续费：<i> {{Premium}} </i> <br>
					赎回获得：<i> {{Renewal}} </i> <br>
					净收入：<i> {{NetIncome}} </i>
				</p>
			</div>
			<script>
				Vue.createApp({
					data(){
						return{
							BidPrice:0,
							SellingPrice:0,
							HandlingFeeRates:0,
							Count:0
						}
					},
					computed:{
						CostPrice(){//计算属性  缓存  返回值
							return (this.BidPrice*this.Count).toFixed(2)
						},
						SellPrice(){
							return (this.SellingPrice*this.Count).toFixed(2)
						},
						Premium(){
							return (this.SellingPrice*this.Count*this.HandlingFeeRates).toFixed(2)
						},
						Renewal(){
							return (this.SellingPrice -this.Premium).toFixed(2)
						},
						NetIncome(){
							return ((this.SellPrice -this.BidPrice)*this.Count).toFixed(2)
						},
					}
				}).mount('#app')
			</script>
	</body>
</html>